<template>
    <el-container class="mainIndex" style="height: 100%;" v-if="isShowPage">
        <el-header style="text-align: right; font-size: 12px;background-color:#FFF;display: flex;justify-content: end;margin: 10px">
            <div style="font-size: 16px;font-family: cursive;">欢迎使用Cloud云上商城</div>
            <div style="display: flex;margin-left:calc(100% - 350px);">
                <div style="font-size: 13px;">欢迎您:<span style="margin-left: 10px">{{username}}</span></div>
                <el-dropdown style="margin-left: 10px">
                    <i class="el-icon-setting" style="margin-right:15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="unLogin">退出登录</el-dropdown-item>
                        <el-dropdown-item @click.native="showUpdatePassword">修改密码</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container style="height:calc(100% - 100px);margin:5px 10px 25px;margin-top:0px;background-color:lightblue;">
            <el-aside width="250px" style="height: 100%;background-color: #FFF">
                <el-menu :default-openeds="[openIndex]" :default-active="index_cache">
                    <el-submenu :index="item.id" :key="item.id" v-for="(item) in menums">
                        <template slot="title"><i class="el-icon-arrow-down"></i>
                            {{item.name}}
                        </template>
                        <el-menu-item v-for="(subItem) in item.children" @click="clickMenu(subItem,item)" :key="subItem.id" :index="subItem.id">{{subItem.name}}</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-main>
                    <keep-alive>
                        <router-view v-if='$route.meta.keepAlive' />
                    </keep-alive>
                    <router-view v-if='!$route.meta.keepAlive' />
                </el-main>
            </el-container>
        </el-container>
        <update-password-dialog @close="close" v-if="isShowPassword" />
    </el-container>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import AdminApiActions from '@/components/api/admin-api-actions'
    import TreeUtils from '../common/tree-utils';
    import UpdatePasswordDialog from "@/components/admin-manager/update-password-dialog.vue";
    @Component({
        components: {
            UpdatePasswordDialog
        }
    })
    export default class ProductManager extends Vue {
        public isShow: any = false;
        public menums = new Array < any > ();
        public index_cache: any = "1-1";
        public openIndex = "1";
        public isShowPage = false;
        public username: any = "";
        public isShowPassword: boolean = false;
        public orgData: any = new Array < any > ();
        async created() {
            await this.initUser();
            let menuData: any = await AdminApiActions.getUserPermission();
            this.orgData = menuData.data;
            this.isShowPage = true;
            let treeData = TreeUtils.buildTree(menuData.data);
            this.menums = treeData;
            this.$nextTick(async () => {
                await this.chechCheckMenu();
            })
        }
        public showUpdatePassword() {
            this.isShowPassword = true;
        }
        public close() {
            this.isShowPassword = false;
        }
        public clickMenu(item: any, parent: any) {
            localStorage.setItem("index_cache" + "_" + this.username, item.id);
            localStorage.setItem("parent_cache_id" + "_" + this.username, parent.id);
            if (this.$router) {
                let params: any = {};
                params.id = 0;
                if (item.resourceUrl == "/admin/sysOperationPermission" || item.resourceUrl == "/admin/sysOperationRole") {
                    params.type = "1";
                }
                if (item.resourceUrl == "/admin/sysMeunPermission" || item.resourceUrl == "/admin/sysMenuRole") {
                    params.type = "2";
                }
                this.$router.push({ //核心语句
                    path: item.resourceUrl, // 跳转的路径
                    query: params
                });
            }
            this.$nextTick(() => {
                this.openIndex = parent.id;
            });
        }
        public async initUser() {
            let apiActions = new AdminApiActions(this);
            let userInfo: any = await apiActions.verify();
            this.$nextTick(() => {
                this.username = userInfo.data.body.username;
            })
        }
        public async chechCheckMenu() {
            try {
                let index_cache: any = localStorage.getItem("index_cache" + "_" + this.username);
                let parent_cache_id: any = localStorage.getItem("parent_cache_id" + "_" + this.username);
                if (parent_cache_id) {
                    this.openIndex = parent_cache_id;
                } else {
                    this.openIndex = this.menums[0].id;
                    this.$router.push({
                        path: '/admin/welcome',
                    });
                }
                if (index_cache) {
                    let curItem: any = this.orgData.find(item => item.id == index_cache);
                    this.index_cache = index_cache;
                    if (curItem.resourceUrl == "/admin/sysMeunPermission") {
                        let params: any = {};
                        params.type = 2;
                        this.$router.push({
                            path: curItem.resourceUrl,
                            query: params
                        });
                    } else if (curItem.resourceUrl == "/admin/sysOperationPermission") {
                        let params: any = {};
                        params.type = 1;
                        this.$router.push({
                            path: curItem.resourceUrl,
                            query: params
                        });
                    } else {
                        this.$router.push({
                            path: curItem.resourceUrl,
                        });
                    }

                }
            } catch (e) {

            };

        }
        public async unLogin() {
            let apiActions = new AdminApiActions(this);
            await apiActions.unLogin();
            await apiActions.verify();
        }
        public findCacheIndex(menums, index_cache) {
            let itemMenu: any = menums && menums.find(item => item.id == index_cache);
            if (!itemMenu && menums && menums.length > 0) {
                for (let i = 0; i < menums.length; i++) {
                    itemMenu = this.findCacheIndex(menums[i].elSubmenus, index_cache);
                    if (itemMenu) {
                        return itemMenu;
                    }
                }
            };
            return itemMenu;
        }

        public getNoPermission(data ? : any) {
            if (data) {
                localStorage.setItem("index_cache", data.index)
            };
            this.$router.push({ // 核心语句
                path: '/admin/noPermissionPage', // 跳转的路径
                query: {
                    id: '0',
                },
            });
            if (data) {
                this.$nextTick(() => {
                    this.openIndex = data.$parent.index;
                });
            }
        }

    }
</script>
<style lang="less">
    html {
        height: calc(100% - 30px);
    }

    body {
        height: 100%;
    }

    #app {
        height: 100%;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        height: 100%;
    }

    *::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    *::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        background-color: #B3C0D1;
    }

    .el-container {
        background-color: white;
        margin-left: 10px !important;
    }

    .el-dropdown-menu {
        top: 40px !important;
        padding: 5px 0 !important;
    }

    .el-dropdown-menu__item {
        list-style: none;
        line-height: 20px !important;
        padding: 0 20px;
        margin: 0;
        font-size: 12px !important;
        color: #606266;
        cursor: pointer;
        outline: 0;
    }

    .el-main {
        margin-left: 5px;
    }

    .mainIndex {
        background-color: lightblue;
    }
</style>